<template>
	<view class="h-screen flex flex-col">
		<NavBarVue title="学习资料" :leftIcon="false"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="px-30">
					<view class="bg-gradient-to-b from-[#D0EEFF] to-[#FFFFFF] rounded-lg p-20">
						<ImageBoxVue src="/static/study/study_title.png" width="132rpx" height="39rpx"></ImageBoxVue>
						<scroll-view scroll-x class="mt-20">
							<view class="flex">
								<UserVue class="mr-20" v-for="e,i in userList" :key="i" :val="e"></UserVue>
							</view>
						</scroll-view>
					</view>
					<!-- 热门视频资料 -->
					<view class="part mt-30">
						<view class="flex justify-between items-center">
							<view class="flex mb-20">
								<ImageBoxVue src="/static/study/hot_video.png" width="180rpx" height="49rpx"></ImageBoxVue>
							</view>
							<view class="flex justify-center items-center" @click="onPath(`/pages/study/studyList`)">
								<text class="text-sm">更多</text>
								<uni-icons type="right" size="18"></uni-icons>
							</view>
						</view>
						<scroll-view scroll-x>
							<view class="flex">
								<HotListVue class="mr-20" v-for="e,i in videoList" :key="i" :val="e" type="0"></HotListVue>
							</view>
						</scroll-view>
					</view>
					<!-- 热门语音资料 -->
					<view class="part mt-30">
						<view class="flex justify-between items-center">
							<view class="flex mb-20">
								<ImageBoxVue src="/static/study/hot_voice.png" width="180rpx" height="49rpx"></ImageBoxVue>
							</view>
							<view class="flex justify-center items-center" @click="onPath(`/pages/study/studyList`)">
								<text class="text-sm">更多</text>
								<uni-icons type="right" size="18"></uni-icons>
							</view>
						</view>
						<scroll-view scroll-x>
							<view class="flex">
								<HotListVue class="mr-20" v-for="e,i in voiceList" :key="i" :val="e" type="0"></HotListVue>
							</view>
						</scroll-view>
					</view>
					<!-- 搜索框 -->
					<view class="flex items-center">
						<ImageBoxVue src="/static/test/customer_service1.png" width="68rpx" height="62rpx">
						</ImageBoxVue>
						<view class="bg-[#EDF5FA] rounded-full flex-1 mx-10 h-68">
							<input type="text" placeholder="请输入您要咨询的问题" class="h-full pl-20" />
						</view>
						<ImageBoxVue src="/static/study/button.png" width="88rpx" height="69rpx"></ImageBoxVue>
					</view>
					<view class="pb-20">
						<StudyListVue v-for="e,i in tabList" :key="i" :val="e"></StudyListVue>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import DtudyListVue from './components/study/DtudyList.vue';
	import HotListVue from './components/study/HotList.vue';
	import StudyListVue from './components/study/StudyList.vue';
	import UserVue from '@/components/User.vue';
	import courseApi from '@/apis/apiList/courseApi';
	import liveApi from '@/apis/apiList/liveApi';

	const tabList = ref([])
	const tab1 = ref(0)
	const studyList1 = ref([])
	const voiceList = ref([]) // 语音资料列表
	const videoList = ref([]) // 视频资料列表
	const userList = ref([])
	
	const tab = ref(0)
	const studyList = ref([])
	
	onShow(() => {
		getisrecAnchorlist()
		getCouresTypelist()
		getHotList(1)
		getHotList(2)
	})
	
	// 获取分类
	const getCouresTypelist = () => {
		courseApi.getCouresTypelist().then(res => {
			tab1.value = res.data[0].id
			tabList.value = res.data
		})
	}
	// 热门作者
	const getisrecAnchorlist = () => {
		liveApi.getisrecAnchorlist().then(res => {
			userList.value = res.data
		})
	}
	const getList1 = (id) => {
		tab1.value = id
		getCourselist(id)
	}

	const getHotList = (id) => {
		const opt = {
			cousts: id,
			limit: 10
		}
		console.log(opt)
		courseApi.getCourselist(opt).then(res => {
			if (id == 1) {
				voiceList.value = res.data
			}else {
				videoList.value = res.data
			}
		})
	}
	const onPath = (router) => {
		uni.navigateTo({
			url: router
		})
	}
</script>

<style>

</style>